import React, { useEffect, useReducer, useState } from "react";

import AppContainer from "./pages/app";

import "taro-ui/dist/style/index.scss"; // 全局引入一次即可
import "./app.scss";
import "./assets/css/index.scss";
import { AudioCtx } from "./context";
import {
  djInfoRedcer,
  playInfoRedcer,
  canPlayListRedcer,
  playPrivilegesRedcer,
  recommendListRedcer,
  recommendNewSongRedcer,
  recommendRedcer,
  myCreateListRedcer,
  myCollectListRedcer,
  currentSongIdRedcer,
  currentSongInfoRedcer,
  currentSongIndexRedcer,
  playModeRedcer,
  likeMusicListRedcer,
  isPlayingRedcer,
  recentTabRedcer,
  recommendDjRedcer
} from "./reducers/index";
import { playListLocalStorage } from "./helpers/play";
function App() {
  const [djInfoState, djInfoDispatch] = useReducer<any>(djInfoRedcer, {});
  const [playInfoState, playInfoDispatch] = useReducer<any>(playInfoRedcer, {});
  const [canPlayListState, canPlayListDispatch] = useReducer<any>(
    canPlayListRedcer,
    {}
  );
  const [playPrivilegesState, playPrivilegesDispatch] = useReducer<any>(
    playPrivilegesRedcer,
    {}
  );
  const [recommendListState, recommendListDispatch] = useReducer<any>(
    recommendListRedcer,
    {}
  );
  const [recommendDjState, recommendDjDispatch] = useReducer<any>(
    recommendDjRedcer,
    {}
  );
  const [recommendNewSongState, recommendNewSongDispatch] = useReducer<any>(
    recommendNewSongRedcer,
    {}
  );
  const [recommendState, recommendDispatch] = useReducer<any>(
    recommendRedcer,
    {}
  );
  const [myCreateListState, myCreateListDispatch] = useReducer<any>(
    myCreateListRedcer,
    {}
  );
  const [currentSongInfoState, currentSongInfoDispatch] = useReducer<any>(
    currentSongInfoRedcer,
    {}
  );
  const [currentSongIdState, currentSongIdDispatch] = useReducer<any>(
    currentSongIdRedcer,
    {}
  );
  const [currentSongIndexState, currentSongIndexDispatch] = useReducer<any>(
    currentSongIndexRedcer,
    {}
  );
  const [playModeState, playModeDispatch] = useReducer<any>(playModeRedcer, {});
  const [isPlayingState, isPlayingDispatch] = useReducer<any>(
    isPlayingRedcer,
    {}
  );
  const [likeMusicListState, likeMusicListDispatch] = useReducer<any>(
    likeMusicListRedcer,
    {}
  );
  const [recentTabState, recentTabDispatch] = useReducer<any>(
    recentTabRedcer,
    {}
  );
  const [myCollectListState, myCollectListDispatch] = useReducer<any>(
    myCollectListRedcer,
    {}
  );
  const [playList, setPlayList] = useState([]);
  useEffect(() => {
    setPlayList(() => playListLocalStorage.getItem());
  }, []);
  return (
    <AudioCtx.Provider
      value={{
        djInfoState,
        djInfoDispatch,
        playInfoState,
        playInfoDispatch,
        canPlayListState,
        canPlayListDispatch,
        playPrivilegesState,
        playPrivilegesDispatch,
        recommendListState,
        recommendListDispatch,
        recommendDjState,
        recommendDjDispatch,
        recommendNewSongState,
        recommendNewSongDispatch,
        recommendState,
        recommendDispatch,
        myCreateListState,
        myCreateListDispatch,
        currentSongInfoState,
        currentSongInfoDispatch,
        currentSongIdState,
        currentSongIdDispatch,
        currentSongIndexState,
        currentSongIndexDispatch,
        playModeState,
        playModeDispatch,
        isPlayingState,
        isPlayingDispatch,
        likeMusicListState,
        likeMusicListDispatch,
        recentTabState,
        recentTabDispatch,
        myCollectListState,
        myCollectListDispatch
      }}
    >
      <AppContainer />
    </AudioCtx.Provider>
  );
}

export default App;
